<template>
  <!-- Vue3不需要根标签了 -->
  <div class="title">hello vue3</div>
  <p>{{ count }}</p>
  <p>{{ times }}</p>
  <button @click="count++">更新</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

/*
  面试：watch和computed的区别？
    1. 计算属性一定有返回值，监视属性没有返回值
    2. 监视属性可以进行异步操作，计算属性不能做异步操作
    3. 计算属性有缓存，监视属性没有
  
  开发：什么时候使用watch或computed？
    默认使用data数据渲染
    data数据不能直接展示，需要做一些处理（计算，过滤，累加。。）才能展示，考虑计算属性
    做一些处理有异步操作，使用watch（能用computed就用computed）
*/

export default defineComponent({
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    // 只读的计算属性
    times() {
      return this.count + "次";
    },
    // 可读可写计算属性
    xxx: {
      get() {},
      set() {},
    },
  },
  watch: {
    // count(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    count: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      immediate: true, // 一上来触发，第一次就触发
      // deep: true // 深度监视
    },
  },
});
</script>

<style scoped>
.title {
  color: red;
}
</style>
